<template>
  <div class="search-container">
    <h1 @click="close" class="decorative-title">Quick Search</h1>
    <div class="search-wrapper">
      <input
        ref="searchInput"
        v-model="searchText"
        type="text"
        placeholder="Search or type a command..."
        class="search-input"
        @keyup.enter="handleSearch"
        @blur="handleBlur"
      />
    </div>
  </div>
</template>

<style scoped>
.search-container {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1000;
  width: 100%;
  max-width: 600px;
  padding: 0 20px;
}

.search-wrapper {
  background: hsla(0, 0%, 100%, 0.1); /* 更明亮的半透明背景 */
  backdrop-filter: blur(20px) saturate(180%); /* 增强模糊和饱和度 */
  border-radius: 16px;
  padding: 24px;
  box-shadow: 
    0 8px 32px rgba(0, 0, 0, 0.18),
    inset 0 4px 8px rgba(255, 255, 255, 0.1);
  transition: all 0.3s ease;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.search-wrapper:hover {
  box-shadow: 
    0 12px 40px rgba(0, 0, 0, 0.25),
    inset 0 4px 12px rgba(255, 255, 255, 0.15);
}

.search-input {
  width: 100%;
  background: transparent;
  border: none;
  outline: none;
  color: rgba(255, 255, 255, 0.95);
  font-size: 1.2rem;
  line-height: 1.5;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell;
  padding: 12px 16px;
  caret-color: #4F46E5; /* 自定义光标颜色 */
}

.search-input::placeholder {
  color: rgba(255, 255, 255, 0.6);
  letter-spacing: 0.2px;
}

.search-input:focus {
  background: linear-gradient(to right, 
    rgba(79, 70, 229, 0.15) 0%,
    rgba(99, 102, 241, 0.05) 100%);
}

.decorative-title {
  color: rgba(255, 255, 255, 0.15);
  font-size: 4rem;
  font-weight: 700;
  position: absolute;
  top: -60px;
  left: 50%;
  transform: translateX(-50%);
  user-select: none;
  pointer-events: none;
  letter-spacing: -0.03em;
  text-align: center;
  margin: 0;
}

/* 微调动画效果 */
@keyframes fadeIn {
  from { opacity: 0; transform: translate(-50%, -45%); }
  to { opacity: 1; transform: translate(-50%, -50%); }
}

.search-container {
  animation: fadeIn 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
</style>

<script setup lang="ts">
  import { nextTick, onMounted, ref } from 'vue'
  import { getCurrentWindow } from '@tauri-apps/api/window';
  import { invoke } from '@tauri-apps/api/core';

  const appWindow = getCurrentWindow();

  const searchText = ref('')
  const searchInput = ref<HTMLInputElement | null>(null)


  onMounted(async () => {
    await appWindow.show();
    //appWindow.setSize(new LogicalSize(600 ,100));
    // 需要等待 DOM 更新
    nextTick(() => {
      // 添加 50ms 延迟确保窗口完全渲染
      setTimeout(() => {
        appWindow.setFocus() // 确保窗口获得焦点
        searchInput.value?.focus()

      }, 50)
    })


    await appWindow.listen<any>("do_job_focus", (event) => {
      let temp = event.payload;
      console.log(temp);
      if (temp == '1') {
        appWindow.setFocus() // 确保窗口获得焦点
        searchInput.value?.focus()
    
      }
    });


  })

  async function close() {
    await appWindow.close()
  }

  // const emit = defineEmits<{
  //   (e: 'search', value: string): void
  // }>()
1
  const handleSearch = async () => {
    console.log(searchText.value)
    await invoke("do_job", {text: searchText.value});
    searchText.value = "";
  }

  const handleBlur = async () => {
    // 这里可以加一个小延时，防止误触
    setTimeout(() => {
      appWindow.close();
    }, 100); // 避免某些场景中误触，100ms 缓冲
  };
</script>

